<!-- 入场申请 -->
<script>
import bus from "@/eventBus";
import LocalStore from "store";
import HPModuleTitle from "@/components/HPModuleTitle";
import PreviewPdfOrImage from "@/components/PreviewPDFOrImage";
import Verify from "@/utils/checkInpu";
import { isPeopleCode } from "@/assets/js/reg";
import {
  findAdmitField,
  findAdmitDept,
  addEctranceDetailInfo,
  findAdmitSupplier,
  findReportObject,
  findAdmitDetail,
  fetchWorkCityForPlace,
} from "@/fetch/modules/ectrance";
import { debounce } from 'lodash';

function fetchEntranceDetailInfo(store, opts) {
  return store.dispatch("FETCH_ENTRANCE_DETAIL", opts);
}
export default {
  components: {
    HPModuleTitle,
    PreviewPdfOrImage,
  },
  data() {
    const monthlyValidte = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入月薪"));
      } else if (
        !new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) ||
        value >= 1000000
      ) {
        callback(new Error("限6位正整数(两位小数)"));
      } else {
        callback();
      }
    };
    return {
      detailLoading: false, // * 加载动画开关
      workTimeTypeDisable: false,
      formData: {
        offerId: this.$route.query.offerId, // id
        surname: "",
        outsourcAccount: "", // 外包人员账号
        english: "", // 拼音
        officeAccount: "", // 域账号
        wordCode: "", // 外包工号
        wechatId: "", // 企微ID
        supplierId: "",
        supplierName: "", // 外包公司名称
        sex: "", // 性别
        admittime: "", // 入场时间
        outscourceStaffName: "", // 外包人员姓名
        certificateCode: "", // 证件号码
        certificateTypeCode: "", // 证件类型
        areaCode: "",
        telephone: "", // 联系电话
        admitTime: "",
        workingPlace: "",
        reportingPlace: "",
        higherupName: "",
        residenceAddress: "",
        address: "",
        authority: [1, 2, 3, 4, 5],
        deptCode: "",
        oaAccount: 0,
        bhrAccount: 0,
        flowAccount: 0,
        accountMatching: 0,
        certificateFiles: [], // 免冠照
        fileUrls: [],
        settlementMethod: "",
        outsourceType: 'E1',
        positionName: "",
        workTimeType: ""
      },
      fileLists: [],
      furlLists: [],
      headerObj: {
        "Access-Token": LocalStore.get("token"),
      },
      pickerOptions: {},
      checkList: [],
      checkForm: {
        sex: [{ required: true, message: "请选择性别", tirgger: "change" }],
        outsourcAccount: [{ required: true, message: "", tirgger: "change" }],
        surname: [
          { required: true, message: "请输入真实姓名", tirgger: "change" },
        ],
        english: [
          { required: true, message: "请输入姓名获取", tirgger: "change" },
        ],
        officeAccount: [{ required: true, message: "", tirgger: "change" }],
        wordCode: [{ required: true, message: "", tirgger: "change" }],
        monthly: [
          { required: true, validator: monthlyValidte, tirgger: "change" },
        ],
        areaCode: [
          { required: true, message: "请输入区号", tirgger: "change" },
        ],
        telephone: [
          { required: true, message: "请输入手机号码", tirgger: "change" },
        ],
        workingPlace: [
          { required: true, message: "请选择工作地点", tirgger: "change" },
        ],
        reportingPlace: [
          { required: true, message: "请选择报道地点", tirgger: "change" },
        ],
        higherupName: [
          { required: true, message: "请输入汇报对象", tirgger: "change" },
        ],
        deptCode: [
          { required: true, message: "请选择所在部门", tirgger: "change" },
        ],
        workTimeType: [
          { required: true, message: "请选择考勤工时制", tirgger: "change" },
        ],
        positionName: [
          { required: true, message: "请输入岗位名称", tirgger: "change" },
        ],
        supplierId: [
          {
            type: "number",
            required: true,
            message: "请选择所属供应商",
            tirgger: "change",
          },
        ],
        authority: [
          {
            type: "array",
            required: true,
            message: "请选择申请开通权限",
            tirgger: "change",
          },
        ],
        bhrAccount: [
          {
            type: "number",
            required: true,
            message: "请选择是否开启BHR账号",
            tirgger: "change",
          },
        ],
        oaAccount: [
          {
            type: "number",
            required: true,
            message: "请选择是否开启OA账号",
            tirgger: "change",
          },
        ],
        flowAccount: [
          {
            type: "number",
            required: true,
            message: "请选择是否添加flow账号",
            tirgger: "change",
          },
        ],
        accountMatching: [
          {
            type: "number",
            required: true,
            message: "请选择是否开启账号匹配",
            tirgger: "change",
          },
        ],
        certificateFiles: [
          {
            type: "array",
            required: true,
            message: "请上传一寸免冠照",
            tirgger: "change",
          },
        ],
        fileUrls: [
          {
            type: "array",
            required: true,
            message: "请上传相关附件",
            tirgger: "change",
          },
        ],
        reasonApplying: [
          { required: true, message: "请输入申请原因", tirgger: "change" },
        ],
        admitTime: [
          {
            required: true,
            type: "string",
            message: "请选择入场时间",
            tirgger: "change",
          },
        ],
        certificateTypeCode: [
          { required: true, message: "请选择证件类型", tirgger: "change" },
        ],
        remark: [
          { validator: Verify.nonEmpty, required: true, trigger: "blur" },
        ],
        certificateCode: [
          {
            validator: (rule, val, callback) => {
              if (this.formData.certificateTypeCode !== "01") {
                callback();
                return;
              }
              if (!val) {
                return callback("请输入证件号码");
              } else {
                if (!isPeopleCode.test(val)) {
                  callback("证件号码格式不正确");
                }
                callback();
              }
            },
            required: true,
            tirgger: "blur",
          },
        ],
        email: [{ validator: Verify.email, required: true, trigger: "blur" }],
        age: [{ validator: Verify.num, required: true, trigger: "blur" }],
        birthDate: [
          {
            type: "date",
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        genderCode: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
      },
      isShowInputBox: false,
      tipText: "填写相关资料",
      dialogImageUrl: "",
      fileDialogVisible: false,
      entranceInfo: {},
      stus: "",
      isCan: false,
      fUrl: FILE_URL + "supplierBusinessAdmit/upload.do",
      colNum: 12,
      areas: [], // 区号
      idtypes: [], // 证件类型
      zzgzdds: [], // 城市
      placeOptions: [], // 报道地点
      deptOptions: [],
      workTimeTypeOptions: [],
      outsourceTypeOptions: [],
      supplierOptions: [],
      reportOptions: [], // 汇报对象
    };
  },
  watch: {
    "formData.workingPlace"(val) {
      if (!val) return (this.formData.reportingPlace = "");
      this.getCityPlaceData(val);
    },
  },
  computed: {
    codeType: function () {
      return this.fromData.certificatetypeCode;
    },
    origin() {
      const host = location.origin.includes("localhost")
        ? "http://10.27.195.151/"
        : `${location.protocol}//${location.hostname}/`;
      return host;
    },
  },
  created() {
    this.findAdmitField();
  },
  beforeMount() {
    const { userName, stus, approvalState, offerId } = this.$route.query;
    this.stus = stus;
    this.formData.surname = userName;
    this.findAdmitDept("");
    if (["3",'4', '5'].includes(approvalState)) {
      this.findAdmitDetail(offerId);
    }
  },
  methods: {
    reportPersonChange(val) {
      this.reportOptions.forEach((item) => {
        // console.log(item, val)
        if (item.coded === val) {
          this.formData.higherupCode = item.adAccount || item.coded;
        }
      });
    },
    // 驳回重新申请、回显数据
    findAdmitDetail(offId) {
      this.detailLoading = true;
      findAdmitDetail({ offId }).then((res) => {
        let tempObj = res.data;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data;
          const authority = [];
          const authorityObj = {
            仅开通域账户: 1,
            开通域账户及邮箱: 2,
            开启企业微信: 3,
            开通工卡: 4,
            申请计算机: 5,
          };
          tempData.authority &&
            tempData.authority.split(",").forEach((item) => {
              authority.push(authorityObj[item]);
            });

          this.formData = {
            ...tempData,
            authority,
            bhrAccount: tempData.bhrAccount - 0,
            oaAccount: tempData.oaAccount - 0,
            flowAccount: tempData.flowAccount - 0,
            accountMatching: tempData.accountMatching - 0,
            higherupName: tempData.higherupName,
            higherupCode: tempData.higherupCode,
            higherupId: tempData.higherupId,
            sex: tempData.sex + "",
            monthly: tempData.monthly + "",
            deptCode: this.formData.deptCode || tempData.deptCode,
            settlementMethod: this.formData.settlementMethod || tempData.settlementMethod,
            positionName:  tempData.positionName || this.formData.positionName,
            outsourceType: 'E1'
          };

          console.log(this.formData.positionName)

          this.fileLists = [
            {
              ...tempData.photos[0],
              url: this.origin + "/" + tempData.photos[0].fileUrl,
            },
          ];

          this.furlLists = tempData.fileUrls.map((item) => {
            const type = item.type.split("/")[1];
            return {
              ...item,
              url:
                type === "pdf"
                  ? require("../../../assets/images/pdf.png")
                  : this.origin + "/" + item.fileUrl,
            };
          });

          this.formData.fileUrls = tempData.fileUrls;
          this.formData.certificateFiles = tempData.photos;

          delete this.formData.photos;
          delete this.formData.fileUrl;
        }
        this.detailLoading = false;
      });
    },
    fileUrlOnSuccess(res) {
      if(res.state === "0000") {
        this.formData.fileUrls.push({
          ...res.data.uploads[0],
          fileUrl: res.data.filePath,
        });
        this.furlLists = this.formData.fileUrls.map((item) => {
          const type = item.type.split("/")[1];
          return {
            ...item,
            url:
              type === "pdf"
                ? require("../../../assets/images/pdf.png")
                : this.origin + "/" + item.fileUrl,
          };
        });
      } else {
        this.$message.error("上传附件失败!");
        this.furlLists = this.formData.fileUrls.map((item) => {
          const type = item.type.split("/")[1];
          return {
            ...item,
            url:
              type === "pdf"
                ? require("../../../assets/images/pdf.png")
                : this.origin + "/" + item.fileUrl,
          };
        });
      }
    },
    findReportObject(val) {
      const { needsCvId } = this.$route.query;
      this.reportOptions = [];
      if (!this.formData.deptCode) {
        this.$message.error("请先选择部门!");
        return;
      }

      if (!val) return;
      findReportObject({
        nickName: val,
        needsCvId,
        deptCode: this.formData.deptCode,
      }).then((res) => {
        // console.log(res)
        const { data, state } = res.data;
        if (state === "0000") {
          if (!data.length) return;
          this.reportOptions = data.map((item) => {
            return {
              label: `${item.nickName}(${item.workCode})`,
              coded: `${item.adAccount}&&${item.userName}`,
              adAccount: item.adAccount,
            };
          });
        }
      });
    },
    findSupplier(val) {
      findAdmitSupplier({ supplierName: val }).then((res) => {
        const { data, state } = res.data;
        if (state === "0000") {
          this.supplierOptions = data.map((item) => {
            return {
              label: item.supperName,
              coded: item.id,
            };
          });
        }
      });
    },
    // * 获取入场部门
    findAdmitDept(val) {
      if (!val) return;
      findAdmitDept({ deptName: val }).then((res) => {
        const { data, state } = res.data;
        if (state === "0000") {
          this.deptOptions = data.map((item) => {
            return {
              label: item.deptname,
              coded: item.deptCode,
            };
          });
        }
      });
    },
    findAdmitField() {
      const { userName, needsCvId, workCode } = this.$route.query || {};
      findAdmitField({ surName: userName, needsCvId, workCode }).then((res) => {
        const data = res.data;
        if (data.state === "0000") {
          this.areas = [];
          this.idtypes = [];
          this.zzgzdds = [];
          const {
            areas,
            idtypes,
            zzgzdds,
            english,
            deptCode,
            deptName,
            telephone,
            supplierId,
            supplierName,
            clearingFormVO,
            city,
            place,
            managerNickName,
            managerAdAccount,
            managerWorkCode,
            workTimeTypeMap,
            outsourceTypeMap,
            positionName,
            workTimeType,
          } = data.data;
          if (city && city.coded) {
            this.formData.workingPlace = city.coded;
          }
          if (place && place.coded) {
            this.formData.reportingPlace = place.coded;
          }

          if (zzgzdds.length) {
            this.zzgzdds = zzgzdds;
          }
          if (english) {
            this.formData.english = english;
          }
          if (telephone) {
            this.formData.telephone = telephone;
          }
          if (supplierId) {
            this.formData.supplierId = supplierId - 0;
            this.formData.supplierName = supplierName;
            this.supplierOptions = [
              {
                label: supplierName,
                coded: supplierId - 0,
              },
            ];
          }

          if(workTimeType) {
            this.formData.workTimeType = workTimeType
            this.workTimeTypeDisable = true
          }
          if (deptCode) {
            this.deptOptions = [
              {
                label: deptName,
                coded: deptCode,
              },
            ];
            this.formData.deptCode = deptCode;
            this.$forceUpdate()
          }
          if (workTimeTypeMap) {
            for(let key in workTimeTypeMap) {
              this.workTimeTypeOptions.push({
                label: workTimeTypeMap[key],
                coded: key,
              })
            }
          }
          if (outsourceTypeMap) {
            for(let key in outsourceTypeMap) {
              this.outsourceTypeOptions.push({
                label: outsourceTypeMap[key],
                coded: key,
              })
            }
          }

          this.formData.positionName = positionName
          // 新增 外包人员汇报对象预填充
          const { approvalState } = this.$route.query
          if(['0', '3', '4', '5'].includes(approvalState)) {
            this.reportOptions.push({
              label: `${managerNickName}(${managerWorkCode})`,
              coded: `${managerAdAccount}&&${managerNickName}`,
              adAccount: managerAdAccount,
            })
            this.formData.higherupName = `${managerAdAccount}&&${managerNickName}`
            this.formData.higherupCode = managerAdAccount
          }
          for (let key in areas) {
            this.areas.push({
              label: "+" + areas[key],
              coded: key,
            });
          }
          for (let key in idtypes) {
            this.idtypes.push({
              label: idtypes[key],
              coded: key,
            });
          }

          this.formData.settlementMethod = clearingFormVO.settName;
        }
      });
    },
    // * 根据城市code获取报道地点
    async getCityPlaceData(coded) {
      if (coded) {
        const { data } = await fetchWorkCityForPlace({ coded });
        if (data.state === "0000") {
          this.placeOptions = data.data || [];
        }
      }
    },
    getEntranceDetal(needId) {
      fetchEntranceDetailInfo(this.$store, { id: needId }).then(() => {
        let tempObj = this.$store.getters.getEctranceDetail;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data;
          this.entranceInfo = this.desc_datas(tempData, "");
          this.formData = this.desc_datas(tempData, this.stus);

          if (this.stus && this.stus === "1") {
            // 待填写
            this.isShowInputBox = true;
            this.formData.admittime = "";
            this.formData.certificatetypeCode = "";
            this.formData.certificatecode = "";
            this.formData.email = "";
            this.formData.birthDate = "";
            this.formData.age = "";
            this.formData.contractBeginDate = "";
            this.formData.contractEndDate = "";
            this.formData.socialSecurityPayment = "";
          } else {
            // 已填写
            this.tipText = "入场相关资料";
            this.isShowInputBox = false;
          }
        }
      });
    },
    showPDFImgDialog(url, admitId) {
      //预览文件
      // let tempUrl = url
      if (admitId) {
        let datas = {
          name: "",
          type: "img",
          url: admitId,
          //  url: tempUrl,
          isSave: "1", // 已保存到远程库
        };
        bus.$emit("show-pdf-img-pup", datas);
      } else {
        this._showMessage("error", "文件不存在!");
      }
    },
    cancleAddEntranceInfo() {
      const { formQuery } = this.$route.query
      this.$router.push({
        path: "/entrance",
        query: {
          formQuery
        }
      });
    },
    handleRemove(file, fileList) {
      this.fileLists = [];
      this.formData.uploadFileUrl = "";
    },
    fileRemove(file) {

      if ((file.response && file.response.data) || file.status === "done") {
        const filePath = file.fileUrl || file.response.data.filePath;
        this.formData.fileUrls = this.formData.fileUrls.filter((item) => {
          return item.fileUrl !== filePath;
        });
        this.furlLists = this.furlLists.filter((item) => {
          return item.fileUrl !== filePath;
        });
      }
    },
    showFile(file) {

      const filePath = file.fileUrl;
      let aDom = document.createElement("a");
      aDom.target = "_blank";
      const baseUrl = this.origin;
      aDom.href = baseUrl + filePath;
      aDom.style.display = "none";
      document.body.appendChild(aDom);
      setTimeout(() => {
        aDom.click();
      }, 200);
      setTimeout(() => {
        document.body.removeChild(aDom);
      }, 500);
    },
    handlePictureCardPreview(file) {
      const files = {
        ...file,
      };
      if (file.response) {
        files.fileUrl = file.response.data.filePath;
      }
      this.showFile(files);
    },
    uploadSuccess(res, file, fileList) {
      console.log(res)
      if(res.state === '9999') {
        this.fileLists = []
        this._showMessage("error", res.message);
        return
      }
      this.formData.certificateFiles = [
        {
          ...res.data.uploads[0],
          fileUrl: res.data.filePath,
        },
      ];
    },
    beforeFileUpload(file) {
      let tempType = file.type.split("/"),
        type = tempType[1],
        isTure = false;

      // return false
      if (["jpeg", "png", "pdf"].includes(type)) {
        isTure = true;
      } else {
        this._showMessage("error", "只能上传PDF/JPG/PNG格式图片！");
        isTure = false;
      }
      if (file.size / 1024 > 5 * 1024) {
        this._showMessage("error", "上传文件不能大于5MB！");
        isTure = false;
      }
      if (!this.formData.higherupName) {
        this._showMessage("error", "请先选择外包人员汇报对象！");
        isTure = false;
      }
      return isTure;
    },
    beforeAvatarUpload(file) {
      let tempNames = file ? file.name.split(".") : [],
        tempType = file.type.split("/"),
        isImage = tempType[0],
        imgType = tempType[1],
        isTure = false;

      if (isImage !== "image") {
        this._showMessage("error", "只能上传JPG/PNG格式图片！");
      } else {
        if (imgType === "png" || imgType === "jpeg") {
          isTure = true;
        } else {
          this._showMessage("error", "只能上传JPG/PNG格式图片！");
          isTure = false;
        }
      }
      if (file.size / 1024 > 5 * 1024) {
        this._showMessage("error", "上传文件不能大于5MB！");
        isTure = false;
      }
      if (!this.formData.higherupName) {
        this._showMessage("error", "请先选择外包人员汇报对象！");
        isTure = false;
      }
      return isTure;
    },
    uploadError() {
      this._showMessage("error", "上传文件出错,请重新刷新页面再试!");
    },
    uploadExceed(file, fileList) {
      this._showMessage("warning", "只能上传一个文件!");
    },
    // 提交表单
    saveEntranceInfo:debounce( function(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.formData.certificateFiles) {
            this._showMessage("warning", "请上传证件照片!");
            return;
          }
          this.$confirm("<p>确认是否提交?<p> <p>入场申请提交成功后，候选人信息将进入“审批中心”审批，可通过列表查阅审批状态、进入详情查阅候选人账号审批进度</p>", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "d-message-box",
            confirmButtonClass: "mes-confir-btn",
            cancelButtonClass: "mes-cancel-btn",
            dangerouslyUseHTMLString: true
          })
            .then(() => {
              const { approvalState, needId } = this.$route.query;
              this.isCan = true;
              let tempData = {
                ...this.formData,
                needId,
              };

              const form = new FormData();
              if (approvalState != 3) {
                tempData.higherupCode =
                  this.formData.higherupName.split("&&")[0];
                tempData.higherupName =
                  this.formData.higherupName.split("&&")[1];
              }

              for (let key in tempData) {
                if (["fileUrls", "certificateFiles"].includes(key)) {
                  form.append(key, JSON.stringify(tempData[key]));
                } else {
                  form.append(key, tempData[key]);
                }
              }

              addEctranceDetailInfo(form).then((res) => {
                let tempObj = res.data;
                if (tempObj.state === "0000") {
                  this._showMessage("success", tempObj.message, function () {
                    const { formQuery } = self.$route.query
                    self.$router.push({
                      path: "/entrance",
                      query: {
                        formQuery
                      }
                    });
                    // self.$router.push("/entrance");
                  });
                } else {
                  this.isCan = false;
                }
              });
            })
            .catch((e) => {
              console.log(e);
              this.isCan = false;
            });
        } else {
          this.isCan = false;
          return false;
        }
      });
    }, 1000),
    _showMessage(type, msg, fn) {
      this.$message({
        type: type,
        message: msg,
        duration: 1500,
        onClose: function () {
          if (fn instanceof Function) {
            fn && fn();
          }
        },
      });
    },
    desc_datas(tempData, stus) {
      let tempDeparts = "";
      if (stus !== "1") {
        let departs = tempData.departmantPath.split(">");
        let deLen = departs.length;
        if (deLen > 3) {
          tempDeparts = departs[0] + " ... >" + departs[deLen - 1];
        } else {
          tempDeparts = tempData.departmantPath;
        }
      }
      let tempObj = {
        id: tempData.id, // id
        admitId: tempData.admitId || "", // 图片预览ID
        supplierName: tempData.supplierName, // 外包公司名称
        admittime: stus === "1" ? "" : tempData.admitTime, // 入场时间
        outscourceStaffName: tempData.outscourceStaffName, // 外包人员姓名
        certificatecode: stus === "1" ? "" : tempData.certificateCode, // 证件号码
        certificatetypeCode:
          stus === "1" ? "身份证" : tempData.certificateTypeCode, // 证件类型
        tempCertificateypeCode:
          stus === "1" ? "身份证" : tempData.certificateTypeCode, // 证件类型
        email: stus === "1" ? "" : tempData.email, // 个人邮箱
        telephone: tempData.telephone, // 联系电话
        departmentId: tempData.departmantId, // 服务部门id
        tempDepart: tempDeparts, // 服务部门路径
        postCode: tempData.postCode, // 岗位编号
        postCodeName: tempData.postCode, // 岗位名称
        workingplace: tempData.workingplace, // 工作地
        higherupId: tempData.higherupId, // 接口人编号
        higherupName: tempData.higherupName, // 接口人名称
        higherupemail: tempData.higherUpEmail, // 接口人邮箱
        remark: stus === "1" ? "" : tempData.remark, // 备注
        otherCharge: tempData.otherAmount, // 其他费用
        certificateFile: tempData.certificateFile,
        genderCode: tempData.genderCode || "男", // 性别
        age: tempData.age, // 年龄
        offerType: tempData.offerType, // 类别
      };
      
      return tempObj;
    },
  },
};
</script>

<template>
  <div class="common-pd-page entrance-require" v-loading="detailLoading">
    <div class="container">
      <HPModuleTitle title-text="入场申请"></HPModuleTitle>
      <el-row>
        <el-form
          :inline="true"
          :model="formData"
          ref="formData"
          :rules="checkForm"
          label-position="right"
          label-width="150px"
          size="small"
          :class="'modu-form-box border-none'"
        >
          <!-- 外包人员资料 -->
          <div class="form-static-title">入场信息申请</div>
          <el-row class="people-info-box">
            <el-col :span="12">
              <el-form-item label="姓名：" prop="surname">
                <el-input
                  v-model="formData.surname"
                  size="small"
                  placeholder="请输入真实姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拼音：" prop="english">
                <el-input
                  v-model="formData.english"
                  size="small"
                  placeholder="请输入姓名拼音，如：张三=zhangsan"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sex" label="性别：" :class="'txt-left'">
                <el-radio-group
                  v-model="formData.sex"
                  :class="'radio-group-box '"
                >
                  <el-radio label="1">男</el-radio>
                  <el-radio label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- prop="certificatetypeCode" -->
              <el-form-item label="证件类型：" prop="certificateTypeCode">
                <el-select
                  v-model="formData.certificateTypeCode"
                  clearable
                  placeholder="请选择证件类型"
                >
                  <el-option
                    v-for="item in idtypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.coded"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="formData.tempCertificateypeCode" :disabled="true"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码：" prop="certificateCode">
                <el-input
                  v-model="formData.certificateCode"
                  :maxlength="45"
                  placeholder="请输入证件号码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="外包人员汇报对象：" prop="higherupName">
                <el-tooltip class="item" effect="dark" content="外包人员汇报对象仅支持指定需求所在部门下的正编人员" placement="top-start">
                <el-select
                  v-model="formData.higherupName"
                  clearable
                  :filterable="true"
                  :remote="true"
                  :remote-method="findReportObject"
                  @change="reportPersonChange"
                  placeholder="请输入外包人员汇报对象"
                >
                  <el-option
                    v-for="(optionItem, index) in reportOptions"
                    :key="index"
                    :label="optionItem['label']"
                    :value="optionItem['coded']"
                  ></el-option>
                </el-select>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="areaCode" label="区号：">
                <el-select
                  v-model="formData.areaCode"
                  clearable
                  placeholder="请输入区号"
                >
                  <el-option
                    v-for="item in areas"
                    :key="item.value"
                    :label="item.label"
                    :value="item.coded"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一寸免冠照：" prop="certificateFiles">
                <el-upload
                  :class="'ent-uplaod-box'"
                  :file-list="fileLists"
                  :headers="headerObj"
                  :before-upload="beforeAvatarUpload"
                  :action="fUrl"
                  name="file"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-error="uploadError"
                　:on-exceed="uploadExceed"
                  :limit="1"
                  :on-success="uploadSuccess"
                  :on-remove="handleRemove"
                  :data="{ higherupCode: formData.higherupCode }"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号：" prop="telephone">
                <el-input
                  v-model="formData.telephone"
                  :maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入场日期：" prop="admitTime">
                <el-date-picker
                  v-model="formData.admitTime"
                  :picker-options="pickerOptions"
                  :value-format="'yyyy-MM-dd'"
                  type="date"
                  placeholder="选择入场时间"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作地点：" prop="workingPlace">
                <el-select
                  v-model="formData.workingPlace"
                  clearable
                  placeholder="请选择工作地点"
                  @change="() => (formData.reportingPlace = '')"
                >
                  <el-option
                    v-for="item in zzgzdds"
                    :key="item.coded"
                    :label="item.lable"
                    :value="item.coded"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报道地点：" prop="reportingPlace">
                <el-select
                  v-model="formData.reportingPlace"
                  clearable
                  placeholder="请选择报道地点"
                >
                  <el-option
                    v-for="item in placeOptions"
                    :key="item.coded"
                    :label="item.lable"
                    :value="item.coded"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在部门：" prop="deptCode">
                <!-- <el-input v-model="formData.departmantPath" :title="formData.departmantPath" placeholder="请输入所在部门"></el-input> -->
                <el-select
                  v-model="formData.deptCode"
                  clearable
                  :filterable="true"
                  :remote="true"
                  :remote-method="findAdmitDept"
                  placeholder="请输入部门"
                >
                  <el-option
                    v-for="(optionItem, index) in deptOptions"
                    :key="index"
                    :label="optionItem['label']"
                    :value="optionItem['coded']"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考勤工时制：" prop="workTimeType">
                <el-select
                  v-model="formData.workTimeType"
                  :disabled="workTimeTypeDisable"
                  clearable
                  placeholder="请选择考勤工时制"
                >
                  <el-option
                    v-for="(optionItem, index) in workTimeTypeOptions"
                    :key="index"
                    :label="optionItem['label']"
                    :value="optionItem['coded']"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="外包类型：" prop="outsourceType">
                <el-select
                  v-model="formData.outsourceType"
                  clearable
                  disabled
                  placeholder="请选择外包类型"
                >
                  <el-option
                    v-for="(optionItem, index) in outsourceTypeOptions"
                    :key="index"
                    :label="optionItem['label']"
                    :value="optionItem['coded']"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位名称：" prop="positionName">
                <el-input v-model="formData.positionName" :title="formData.positionName" disabled maxlength="50" placeholder="请输入岗位名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="月薪（元）：" prop="monthly">
                <el-input
                  v-model="formData.monthly"
                  maxlength="10"
                  placeholder="请输入月薪"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结算方式：">
                {{ formData.settlementMethod }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍地址：" prop="residenceAddress">
                <el-input
                  v-model="formData.residenceAddress"
                  :title="formData.departmantPath"
                  placeholder="请输入户籍地址"
                  :maxlength="100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="现住地址：" prop="address">
                <el-input
                  v-model="formData.address"
                  :title="formData.address"
                  placeholder="请输入现住地址"
                  :maxlength="100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属供应商：" prop="supplierId">
                <el-select
                  v-model="formData.supplierId"
                  clearable
                  :filterable="true"
                  :remote="true"
                  :remote-method="findSupplier"
                  disabled
                  placeholder="请输入供应商"
                >
                  <el-option
                    v-for="(optionItem, index) in supplierOptions"
                    :key="index"
                    :label="optionItem['label']"
                    :value="optionItem['coded']"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="申请开通权限：" prop="authority">
                <el-checkbox-group v-model="formData.authority">
                  <el-checkbox :label="1">仅开通域账号</el-checkbox>
                  <el-checkbox :label="2">开通域账号及邮箱</el-checkbox>
                  <el-checkbox :label="3">开启企业微信</el-checkbox>
                  <el-checkbox :label="4">开通工卡</el-checkbox>
                  <el-checkbox :label="5">申请计算机</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="申请原因：" prop="reasonApplying">
                <el-input
                  v-model="formData.reasonApplying"
                  type="textarea"
                  :maxlength="500"
                  :rows="3"
                  placeholder="请输入申请原因"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="相关附件：">
                <el-upload
                  :class="'ent-uplaod-box'"
                  :before-upload="beforeFileUpload"
                  :file-list="furlLists"
                  :headers="headerObj"
                  :action="fUrl"
                  name="file"
                  list-type="picture-card"
                  :on-preview="showFile"
                  :on-error="uploadError"
                  　:on-exceed="uploadExceed"
                  :limit="5"
                  :on-success="fileUrlOnSuccess"
                  :on-remove="fileRemove"
                  :data="{ higherupCode: formData.higherupCode }"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <div v-if="formData.flow" class="report">
                <p> <span class="label">驳回人：</span> <span>{{ formData.flow[0].operator }}</span>   </p>
                <p> <span  class="label">驳回时间：</span> <span>{{ formData.flow[0].createDate }}</span>   </p>
                <div class="reson">
                  <span  class="label">驳回原因：</span>
                  <p v-html="formData.flow[0].comment"></p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="entr-btn-box">
          <el-button
            type="primary"
            size="small"
            :class="'btn'"
            :disabled="isCan"
            @click="saveEntranceInfo('formData')"
            >确认提交</el-button
          >
          <el-button
            :class="'btn cancle-md-btn'"
            size="small"
            @click="cancleAddEntranceInfo"
            >取消</el-button
          >
        </div>
      </el-row>
    </div>
    <PreviewPdfOrImage></PreviewPdfOrImage>
  </div>
</template>

<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
@import "~@/assets/scss/mixins.scss";
@include resRadioGroupBox;
@include resMessageBox;

.flag-txt {
  width: 200px;
  margin-left: -29px;
  height: 40px;
  line-height: 44px;
  background-image: url("~@/assets/images/tip_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #fff;
  i {
    display: inline-block;
    text-indent: 25px;
    width: 100%;
    height: 40px;
    text-align: left;
  }
}
.modu-form-box {
  .el-select {
    width: 100% !important;
  }
}

.report {
  display: inline-block;
  vertical-align: middle;
  p {
    line-height: 20px;
    display: flex;
    .label {
      width: 150px;
      text-align: right;
      color: #606266;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }
  .reson {
    max-height: 100px;
    overflow-y: scroll;
    display: flex;
    span {
      width: 150px;
      text-align: right;
      color: #606266;
      padding-right: 10px;
      box-sizing: border-box;
      position: sticky;
      top: 0;
    }
    p {
      flex: 1;
      color: #FB7299;
      word-break: break-all;
    }
  }
  span {
    color: #FB7299;
    &:last-child {
      flex: 1;
    }
  }
}

.modu-form-box.border-none {
  border: none;
  padding-top: 0px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: bold;
  }
}

.entr-btn-box {
  text-align: left;
  margin-bottom: 15px;
  line-height: 40px;
  .btn {
    vertical-align: middle;
  }
}

.entr-info-box {
  margin-top: 20px;
  border: 1px solid #ecf2f8;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f9fbfd;
  border-radius: 4px;
  .el-col-8 {
    text-align: left;
    padding-left: 20px;
  }
  .el-col-24 {
    text-align: left;
    padding-left: 20px;
    margin-top: 20px;
    span {
      display: inline-block;
      width: 100%;
      height: 22px;
      font-size: 12px;
      line-height: 22px;
    }
  }
  span {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: inline-block;
    text-align: left;
    color: #636363;
    float: left;
  }
  .info-tip {
    width: 95px;
  }
  .img-icon {
    color: #b0b1b1;
    font-size: 18px;
  }
  .img-txt {
    color: $main-color;
    cursor: pointer;
  }
}

.el-icon-question {
  font-size: 18px;
  color: #333;
  vertical-align: middle;
  padding-left: 10px;
}

.ent-uplaod-box {
  display: inline-block;
  text-align: left;
  .el-upload-list {
    width: 100%;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 40px;
    border-radius: 0px;
  }
  .el-upload--picture-card {
    width: 70px;
    height: 40px;
    line-height: 40px;
    border-radius: 0px;
    i {
      font-size: 15px;
      color: #8c939d;
      font-weight: bold;
    }
  }
}

.upload-dialog {
  .el-dialog {
    width: 700px;
  }
}

.star-box {
  .el-form-item {
    .el-form-item__label::before {
      content: "*";
      color: #fa5555;
      margin-right: 4px;
    }
  }
}

.padding-col {
  padding-left: 20px;
}

.form-static-title {
  width: 90%;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  font-weight: bold;
  color: $main-color;
  border-left: 4px solid $main-color;
  text-indent: 20px;
  text-align: left;
}

.people-info-box {
  border: 1px solid #ededed;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 20px 10px 10px;
  text-align: left;
  .el-form-item {
    display: flex;
    .el-form-item__content {
      flex: 1;
    }
  }
}

.people-detail-info-box {
  border: 1px solid #ededed;
  .people-detail-title {
    height: 40px;
    line-height: 40px;
    text-align: left;
    border-bottom: 1px solid #ededed;
    background-color: #fafafa;
    text-indent: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #3a3a3a;
  }
  .form-static-title {
    margin-left: 20px;
    text-indent: 17px;
  }
  .people-detail-box {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ededed;
    &:last-child {
      border-bottom: none;
    }
    .el-col {
      text-align: left;
      padding-left: 40px;
    }
    .form-static-title {
      margin-bottom: 10px;
    }
    span {
      font-size: 14px;
      color: #636363;
      height: 35px;
      line-height: 35px;
      float: left;
    }
    .info-tip {
      width: 130px;
    }
    .img-icon {
      font-size: 14px;
    }
    .img-txt {
      color: $main-color;
      cursor: pointer;
    }
  }
}

.txt-left {
  .el-form-item__content {
    text-align: left;
  }
}
</style>
